<template>
	<div class="shops">
	  <div class="content">
	   <div class="box" v-for="item in shopList" @click="goInfo(item.id)">
	     <div class="shopImg"><img :src="item.src"></div>
	     <div class="shopInfo">
	     	<p>{{item.shopName}}</p>
	     	<p>{{item.address}}</p>
	     </div>	    
	     <div class="writeShop" @click="Cancellation(item.id)">注销</div>
	   </div>
	  </div>
	</div>
</template>

<script>
	export default {
		name:'shops',
		data () {
			return {
				shopList:[]
			}
		},
		created () {
			this.getShopList()
		},
		mounted () {
			
		},
		methods:{
			//获取信息
			getShopList () {
				this.$http.get(this.$store.state.reqUrl + '/salesman/info', {
				}).then(res => {				 
					this.shopList = res.data
				}).catch(res => {
					this.$toast(res.response.data)
				})
			},
			//注销
			Cancellation(id) {
				this.$messagebox.confirm('确定注销吗?').then(action => {
					this.$http.get(this.$store.state.reqUrl + 'shops/info/' + id, {}).then(res => {
						this.getShopList()
					}).catch(res => {
						this.$toast(res.response.data)
					})
				});
			},
			goInfo (id) {
				this.$router.push({
				path:'/shopinfo',
				query:{
					id:id,
				 }
			  })
			},
		}
	}
</script>

<style lang="less" scoped>
    .shops{
    	width:100%;
    	.content{
    		width:100%;
    		.box{
    			width:100%;
    			background: #FFFFFF;
    			padding:20px 20px;
    			display: flex;
    			shopImg{
    				width:120px;
    				height: 120px;
    				img{
    					width:100%;
    					height: 100%;
    				}
    			}
    			.shopInfo{
    				flex: 1;
    				margin-left: 20px;
    				p{
    					font-size: 30px;
    				}
    			}
    			.writeShop {
     				float: right;
     				height: 60px;
     				width: 150px;
     				line-height: 60px;
     				text-align: center;
     				border-radius: 38px;
     				border: 1px solid gainsboro;
     				color: #000000;
     			}
    		}
    	}
    }
</style>